<template>
    <div class="seg-tabs" :class="{ block }">
      <button
        v-for="it in items"
        :key="it.key"
        type="button"
        class="seg-item"
        :class="{ active: it.key === modelValue }"
        @click="$emit('update:modelValue', it.key)"
      >
        <span class="label">{{ it.label }}</span>
      </button>
    </div>
  </template>
  
  <script setup>
  defineProps({
    /** v-model 当前激活 key */
    modelValue: { type: String, required: true },
    /** 形如 [{key:'base', label:'基础配置'}] */
    items:      { type: Array,  default: () => [] },
    /** 是否让容器占满一行（不想占满就传 false） */
    block:      { type: Boolean, default: false }
  });
  defineEmits(['update:modelValue']);
  </script>
  
  <style scoped>
  /* 容器：浅灰底、圆角，像“分段选择器” */
  .seg-tabs{
    display: inline-flex;
    background: #f5f7fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 2px;
    gap: 0;                 /* 让子项无缝拼接 */
    user-select: none;
  }
  .seg-tabs.block{ width: 100%; }
  
  /* 单项 */
  .seg-item{
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 16px;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    line-height: 20px;
    position: relative;
    transition: all .15s ease;
  }
  
  /* 视觉分隔线（未选中项之间） */
  .seg-item:not(:last-child)::after{
    content: "";
    position: absolute;
    right: 0; top: 8px; bottom: 8px;
    width: 1px;
    background: #e5e7eb;
  }
  
  /* 首尾圆角 */
  .seg-item:first-child{ border-radius: 6px 0 0 6px; }
  .seg-item:last-child { border-radius: 0 6px 6px 0; }
  
  /* 悬停 */
  .seg-item:hover{ background: rgba(255,255,255,.5); }
  
  /* 选中态：白底、深色文字、轻阴影 */
  .seg-item.active{
    background: #fff;
    color: #303133;
    border: 1px solid #dcdfe6;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    z-index: 1;                 /* 盖住分隔线 */
  }
  .seg-item.active + .seg-item::after{ display: none; } /* 选中项右侧不显示分隔线 */
  
  .label{ font-weight: 500; letter-spacing: .2px; }
  </style>
  